<template>
  <div class="mt100 mb100">
    <a-row type="flex" align="middle"
           class="mb50 text_left">
        <a-col :span="24">
            <h1><strong class="font50">健康管理模块</strong></h1>
            <p class="green"><strong class="font34">提供健康数据存储服务</strong></p>
            <p class="green"><strong class="font34">实时检测您身体健康情况</strong></p>
        </a-col>
    </a-row>
    <a-row :gutter="[32, 32]" type="flex" justify="space-around" align="top"
           class="text_left">
        <a-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
            <a-row>
                <h1><strong class="font50">记录您专属的管理档案</strong></h1>
                <p class="green">根据您的档案生成相应的统计表显示您的健康情况</p>
                <p class="gray font15">提供健康测试服务的购买，通过测试报告智能推荐相关健康产品，并提供改善建议</p>
            </a-row>
            <!-- 健康模块数据展示 -->
            <a-row :gutter="[32, 32]" >
                <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="12">
                    <a-card class="padding_card">
                        <a-statistic title="体重">
                        </a-statistic>
                    </a-card>
                </a-col>
                <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="12">
                    <a-card>
                        <a-statistic title="血压(收缩压)">
                        </a-statistic>
                    </a-card>
                </a-col>
                <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="12">
                    <a-card>
                        <a-statistic title="血压(舒张压)">
                        </a-statistic>
                    </a-card>
                </a-col>
                <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="12">
                    <a-card>
                        <a-statistic title="ddd">
                        </a-statistic>
                    </a-card>
                </a-col>
            </a-row>
        </a-col>
        <a-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
            <p class="bold">输入您的健康数据</p>
            <a-form-model :model="formModel"
                    :rules="formRules"
                    ref="form"
                    @submit="onSubmit">
                <a-form-model-item prop="weight">
                    <a-input v-model="formModel.weight"
                             placeholder="体重"
                             suffix="kg"
                             size="large"/>
                </a-form-model-item>
                <a-form-model-item prop="systolic">
                    <a-input v-model="formModel.systolic"
                             placeholder="血压(收缩压)"
                             suffix="mmHg"
                             size="large"/>
                </a-form-model-item>
                <a-form-model-item prop="diastolic">
                    <a-input v-model="formModel.diastolic"
                             placeholder="血压(舒张压)"
                             suffix="mmHg"
                             size="large"/>
                </a-form-model-item>
                <a-form-model-item prop="sugar">
                    <a-input v-model="formModel.sugar"
                             placeholder="血糖"
                             suffix="mmol/L"
                             size="large"/>
                </a-form-model-item>
                <a-form-model-item>
                    <a-row>
                        <a-col :span="24" class="text_right">
                            <a-button @click="onSubmit" size="large" class="mr15">生成</a-button>
                            <a-button @click="resetForm" size="large">重置</a-button>
                        </a-col>
                    </a-row>
                </a-form-model-item>
            </a-form-model>
        </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
    data() {
        return {
            formModel: {
                weight: '',
                systolic: '',
                diastolic: '',
                sugar: ''
            },
            formRules: {
                weight: [
                    { required: true, message: '请输入体重' },
                    { pattern: /^-?\d+(\.\d+)?$/, message: '请输入正确的数字或小数', trigger: 'blur' }
                ],
                systolic: [
                    { required: true, message: '请输入收缩压' },
                    { pattern: /^-?\d+(\.\d+)?$/, message: '请输入正确的数字或小数', trigger: 'blur' }
                ],
                diastolic: [
                    { required: true, message: '请输入舒张压' },
                    { pattern: /^-?\d+(\.\d+)?$/, message: '请输入正确的数字或小数', trigger: 'blur' }
                ],
                sugar: [
                    { required: true, message: '请输入血糖' },
                    { pattern: /^-?\d+(\.\d+)?$/, message: '请输入正确的数字或小数', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    alert('提交成功');
                } else {
                    alert('校验失败');
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
        }
    },
    created() {
        console.warn('xxx', this.$refs.form)
    }
}
</script>

<style lang="scss" scoped>
h1 {
    margin-bottom: 0;
}
</style>